<!-- 
	/**
	 * All rights Reserved, Designed By www.youyacao.com <br>
	 * @Description:我的粉丝 关注 获赞 <br>
	 * @version 蜻蜓Q系统  <br>
	 * @author:成都市一颗优雅草科技有限公司  <br>
	 * 注意：使用我司开源源代码请遵循license文件的协议仅供个人非盈利使用，禁止用于其他的商业用途
	 * 需要商业用途或者定制开发等可访问songshu.youyacao.com  联系QQ:2853810243 422108995 23625059584
	 * 正版系统查询系统 zhengbancha.youyacao.com
	 */
 -->
<template>
	<view>
		<view class="head container">
			<view class="status_bar"></view>
			<view class="avatar-box">
				<image class="avatar" :src="user ? user.avatar : ''" mode="aspectFill"></image>
			</view>
			<view class="username">{{ user ? user.nickname || user.username : '--' }}</view>
			<view class="head-handler">
				<tetx class="head-handler-text" @click="$refs.reportPopup.open()">举报</tetx>
				<tetx class="head-handler-text" @tap="_Black">拉黑</tetx>
			</view>
			<view class="head-handler-btn" @tap="_follow" v-if="user">{{ user.is_follow == 0 ? '关注' : '已关注' }}</view>
			<view class="desc">{{ user && user.desc ? user.desc : '这个人很懒，什么也没留下~' }}</view>
			<view class="head-items">
				<view class="head-item ">
					<text class="head-item__value">{{ user ? user.follow_num : 0 }}</text>
					<text class="head-item__label">关注</text>
				</view>
				<view class="head-item head-item__center">
					<text class="head-item__value">{{ user ? user.my_follow_num : 0 }}</text>
					<text class="head-item__label">粉丝</text>
				</view>
				<view class="head-item">
					<text class="head-item__value">{{ user ? user.like_num : 0 }}</text>
					<text class="head-item__label">获赞</text>
				</view>
			</view>
		</view>
		<!-- <view class="hr"></view> -->
		<view class="list-box" style="height: 100vh;">
			<view class="list-head">
				<text class="list-head__text" :class="{ 'tabs-item-text-active': current === 0 }" @tap="current = 0">作品 {{ total[0] }}</text>
				<text class="list-head__text" :class="{ 'tabs-item-text-active': current === 1 }" @tap="current = 1">喜欢 {{ total[1] }}</text>
			</view>
			<list class="list" v-show="current === 0">
				<cell class="cell" v-for="(item, index) in list[0]" :key="index">
					<view class="item" @tap="play(index)">
						<image class="item-avatar" :src="item.thumb" mode="aspectFill"></image>
						<view class="item-head">
							<image class="item-icon" src="/static/images/like.png" mode="aspectFit"></image>
							<text class="item-like__number">{{ item.view_num_str }}</text>
						</view>
						<view class="item-foot">
							<text class="item-title u-line-2">{{ item.title }}</text>
						</view>
					</view>
				</cell>
			</list>
			<list class="list" v-show="current === 1">
				<cell class="cell" v-for="(item, index) in list[1]" :key="index">
					<view class="item" @tap="play(index)">
						<image class="item-avatar" :src="item.thumb" mode="aspectFill"></image>
						<view class="item-head">
							<image class="item-icon" src="/static/images/like.png" mode="aspectFit"></image>
							<text class="item-like__number">{{ item.view_num_str }}</text>
						</view>
						<view class="item-foot">
							<text class="item-title u-line-2">{{ item.title }}</text>
						</view>
					</view>
				</cell>
			</list>
			<view class="alert" v-if="init[current]">正在加载...</view>
			<view class="alert" v-if="!init[current] && list.length && list[current].length === 0">暂无数据</view>
			<view class="alert" v-if="loading[current]">加载更多中...</view>
			<view class="alert" v-if="noData[current] && list.length && list[current].length > 10">没有更多了</view>
		</view>
		<uni-popup ref="reportPopup" type="center">
			<view class="report-box">
				<view class="report-head">
					<text class="report-head-title">举报</text>
					<image class="report-head-icon" src="/static/images/close.png" mode=""
						@tap="$refs.reportPopup.close()"></image>
				</view>
				<view class="report-content">
					<text class="report-title">举报原因</text>
					<view class="report-list">
						<view class="report-item" v-for="(item, index) in reportList" :key="index"
							:class="{ active: active == index }" @click="active = index">
							<text class="report-text">{{ item }}</text>
							<image class="report-img" src="/static/images/checked.png" v-if="active == index"></image>
							<view class="report-check" v-else></view>
						</view>
					</view>
				</view>
				<view class="report-btn" @tap="handleReportSumbit">
					<text class="report-btn-text">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import {
		UserInfo,
		VList,
		LikeVideo,
		Black,
		User,
		Follow,
		Unfollow,
		addReport
	} from '@/common/api.js'
	import appReport from '@/components/app-report'
	export default {
		components: {
			appReport
		},
		data() {
			return {
				reportList: ['帖子内容虚假', '中介', '个人资料虚假', '诈骗', '其他'],
				active: 0,
				current: 0,
				user_id: '',
				user: null,
				list: [
					[],
					[]
				],
				total: [0, 0],
				page: [1, 1],
				init: [true, true],
				loading: [false, false],
				noData: [false, false]
			};
		},
		onLoad(options) {
			this.user_id = options.user_id
			this.getUser()
			this.getVideoList()
			this.getLikeVideo()
		},
		onReachBottom() {
			this.loadmore()
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {
			...mapMutations(['setVideoList']),
			play(index) {
				this.setVideoList(this.list[this.current].slice(index))
				uni.navigateTo({
					url: '/pages/latest/player/player'
				})
			},
			swiperChange({
				detail
			}) {
				this.current = detail.current
			},
			//提交举报
			handleReportSumbit() {
				let text = this.reportList[this.active]
				const data = {
					to_user_id: this.user_id,
					content: text
				}
				addReport(data).then(({
					code,
					msg
				}) => {
					if (code == 200) {
						uni.showToast({
							title: '举报成功'
						})
					} else {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}
					this.$refs.reportPopup.close()
				})
			},
			//关注
			async _follow() {
				if (this.user.is_follow == 0) {
					const {
						msg,
						code
					} = await Follow({
						follow_id: this.user_id
					})
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					if (code === 200) {
						this.user.is_follow = 1
					}
				} else {
					const {
						msg,
						code
					} = await Unfollow({
						follow_id: this.user_id
					})
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					if (code === 200) {
						this.user.is_follow = 0
					}
				}
			},
			_Black() {
				uni.showModal({
					title: '提示',
					content: '确定添加黑名单吗',
					complete: (res) => {

						if (res.confirm) {
							Black({
								user_id: this.userinfo.id,
								to_user_id: this.user_id,
							}).then(({
								msg
							}) => {
								console.log(`用户${this.userinfo.id},对象${this.user_id}`, msg)
								uni.showToast({
									title: msg,
									icon: 'none'
								})
							})
						}
					}
				})

			},
			getUser() {
				UserInfo({
					'user_id': this.user_id
				}).then(({
					code,
					data
				}) => {
					if (code === 200) {
						this.user = data
					}
				})
			},
			getVideoList() {
				VList({
					'user_id': this.user_id,
					'limit': 10,
					page: this.page[this.current]
				}).then(({
					code,
					data
				}) => {
					if (code === 200) {
						const {
							total,
							total_page,
							current_page,
							list
						} = data
						this.total[0] = total
						if (current_page === 1) {
							this.$set(this.list, 0, list)
						} else {
							const _list = this.list[0].concat(list)
							this.$set(this.list, 0, _list)
						}
						if (total_page === 0 || current_page >= total_page) {
							this.$set(this.noData, 0, true)
						}
						this.$set(this.loading, 0, false)
						this.$set(this.init, 0, false)
					}
				})
			},
			getLikeVideo() {
				LikeVideo({
					'user_id': this.user_id,
					'limit': 10,
					page: this.page[this.current],
					'type': 2
				}).then(({
					code,
					data
				}) => {
					if (code === 200) {
						const {
							total,
							total_page,
							current_page,
							list
						} = data
						this.total[1] = total
						if (current_page === 1) {
							this.$set(this.list, 1, list)
						} else {
							const _list = this.list[1].concat(list)
							this.$set(this.list, 1, _list)
						}
						if (total_page === 0 || current_page >= total_page) {
							this.$set(this.noData, 1, true)
						}
						this.$set(this.loading, 1, false)
						this.$set(this.init, 1, false)
					}
				})
			},
			loadmore() {
				if (this.noData[this.current]) return
				this.page[this.current]++
				this.loading[this.current] = true
				if (this.current === 0) {
					this.getVideoList()
				} else {
					this.getLikeVideo()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-clz {
		text-align: center;
		padding: 10rpx;
		border-radius: 10rpx;
		font-size: 25rpx;
	}

	.alert {
		text-align: center;
		padding: 18rpx 0;
		font-size: 24rpx;
	}
	.item-title {
		color: #fff;
	}
	.item-like__number {
		color: #fff;
	}
	.item-head {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.item-icon {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}

	.item-foot {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 20rpx;
		font-size: 28rpx;
	}

	.item {
		position: relative;
	}

	.item-avatar {
		width: 100%;
		height: 360rpx;
		border-radius: 8rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.cell {
		flex-basis: 48%;
		height: 360rpx;
		margin-top: 2%;
		margin-right: 1%;
		margin-left: 1%;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
	}

	.hr {
		height: 20rpx;
	}

	.list-box {}

	.list-head {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e5e5e5;
	}

	.list-head__text {
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		flex: 1;
		color: #999;
	}

	.tabs-item-text-active {
		color: #000;
		border-bottom: 2px solid #000;
	}

	.avatar-box {
		width: 130rpx;
		height: 130rpx;
		margin: auto;
		border-radius: 50%;
	}

	.avatar {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
	}

	.username {
		font-weight: 600;
		font-size: 32rpx;
		line-height: 38rpx;
		margin: 20rpx 0;
	}

	.head-handler {
		flex-direction: row;
	}

	.head-handler-text {
		font-weight: 400;
		font-size: 22rpx;
		line-height: 42rpx;
	}

	.head-handler-text:first-child {
		margin-right: 30rpx;
	}

	.head-handler-btn {
		width: 108rpx;
		height: 46rpx;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 42rpx;
		border-radius: 61rpx 61rpx 61rpx 61rpx;
		border: 1rpx solid #999;
		margin-left: 8rpx;
		text-align: center;
		margin: 20rpx auto;
	}

	.pl-0 {
		padding-left: 0 !important;
	}

	.head-items {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
	}

	.head-item {
		padding: 0 40rpx;
		flex: 1;
	}

	.head-item__value {
		font-weight: 400;
		font-size: 30rpx;
		line-height: 35rpx;
	}

	.head-item__label {
		font-weight: 400;
		font-size: 26rpx;
		line-height: 30rpx;
		display: block;
		margin-top: 10px;
	}

	.desc {
		margin-bottom: 30rpx;
		font-weight: 400;
		font-size: 26rpx;
		line-height: 30rpx;
		text-align: left;
	}

	.head {
		padding: 40rpx;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
	}

	.report-box {
		width: 700rpx;
		border-radius: 23rpx 23rpx 23rpx 23rpx;
		overflow: hidden;
		padding-bottom: 46rpx;
	}

	.report-head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 117rpx;
		padding: 0 41rpx
	}

	.report-head-title {
		font-weight: 600;
		font-size: 35rpx;
		line-height: 53rpx;
	}

	.report-head-icon {
		height: 42.19rpx;
		width: 42.19rpx;
	}

	.report-content {
		padding: 23rpx 29rpx 46rpx 29rpx;
	}

	.report-list {
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 23rpx;
		padding: 23rpx;
	}

	.report-item {
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.report-item+.report-item {
		margin-top: 23rpx;
	}

	.report-title {
		font-weight: 600;
		font-size: 33rpx;
		line-height: 53rpx;
	}

	.report-text {
		font-weight: 400;
		font-size: 33rpx;
		line-height: 53rpx;
	}

	.report-check {
		height: 37.5rpx;
		width: 37.5rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
	}

	.report-img {
		height: 40rpx;
		width: 40rpx;
	}

	.report-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #2FA0F3;
		margin: 0 30rpx;
	}

	.report-btn-text {
		font-weight: 800;
		font-size: 35rpx;
		color: #29A7F6;
		width: 500rpx;
		height: 94rpx;
		line-height: 94rpx;
		text-align: center;
	}
</style>